<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<style>
			body{
				background-color:white;
			}
			
			.souren {
					background: white;
				}
			.souren .mui-search{
				
				
				width:90%;
				height: 60%;
				margin: 20px auto;
				background-color:#F7F7F7;
				border: none;
				
			}
			
			.dianhua p{
				margin-left: 26px;
				margin-top: 8px;
				margin-bottom: 10px;
				font-size: 12px;
			}
			
			.qunzu p{
				margin-left: 26px;
				margin-top: 8px;
				margin-bottom: 10px;
				font-size: 12px;
			}
			.xiangyingbu p{
				margin-left: 26px;
				margin-top: 8px;
				margin-bottom: 10px;
				font-size: 12px;
			}
			
		
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class=" mui-icon mui-icon-home mui-pull-left" id="tongxunlu_return_index"></a>
		     <a class="  mui-pull-right" style="margin-top: 13px; font-size: 14px;">添加</a>
		    <h1 class="mui-title">通讯录</h1>
		</header>
		
		<div class="mui-content souren" >
		   <div class="mui-input-row mui-search" style="background: white;">
                <input type="search" class="mui-input-clear" placeholder="搜人">
           </div>
		</div>
		
          <ul class="mui-table-view" style="margin-top: 20px;"> 
	        <li class="mui-table-view-cell mui-collapse">
	            <a class="mui-navigate-right" href="#"><span class="mui-pull-left" style="float: left;"><img src="images/tongxunlu-1.png" class="img-responsive"></span>
	            	<h6 style="margin-left: 22px; margin-top: 3px;color: #707070;">手机通讯录</h6>
	            </a>
	            <div class="mui-collapse-content dianhua">
	                <p style="margin-top: -10px;">张三:123456789</p> 
	                <p>李四:123456789</p>
	                <p>王五:123456789</p>
	            </div>
	        </li>
	        
	        <li class="mui-table-view-cell mui-collapse">
	            <a class="mui-navigate-right" href="#"><span class="mui-pull-left" style="float: left; "><img src="images/qunzu.png" class="img-responsive"></span>
	            	<h6 style="margin-left: 22px; marging-top: 3px;color: #707070;">群组</h6>
	            </a>
	            <div class="mui-collapse-content qunzu">
	                <p style="margin-top: -10px;">交流群</p>
	                <p>反馈群</p>
	            </div>
	        </li>
	        <li class="mui-table-view-cell mui-collapse">
	            <a class="mui-navigate-right" href="#"><span class="mui-pull-left" style="float: left; "><img src="images/zuzhijiegoutu.png" class="img-responsive"></span>
	            	<h6 style="margin-left: 22px; margin-top: 3px;color: #707070;">民政部国家减灾中心</h6>
	            </a>
	            <div class="mui-collapse-content xiangyingbu">
	                <p style="margin-top: -10px;" id="zuzhijiagou">组织架构</p>
	                <p>响应部</p>
	            </div>
	        </li>
	       
	    </ul>
	    
    
	
	
	
	
	
	
	
	
	
		
		<script type="text/javascript">
						mui.init()
						document.getElementById("tongxunlu_return_index").addEventListener('tap', function(event) {
									mui.openWindow({
										url: 'index.html',
										id: 'index',
										preload: true,
										show: {
											aniShow: 'pop-in',
											duration:'800',
										},
										styles: {
											popGesture: 'hide',
										},
										waiting: {
											autoShow: false
										}
									});
									}, false);
			//跳转到组织架构页面
						document.getElementById("zuzhijiagou").addEventListener('tap', function(event) {
						mui.openWindow({
							url: 'zuzhijiagou.html',
							id: 'zuhzijiagou',
							preload: true,
							show: {
								aniShow: 'pop-in',
								duration:'800',
							},
							styles: {
								popGesture: 'hide',
							},
							waiting: {
								autoShow: false
							}
						});
						}, false);
						
		</script>
	</body>

</html>